<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/css/default.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<style>
.startDown{
    position: relative;
    top: 50%;
    font-size:.5em;
    cursor: pointer;
    z-index: 2;;
    margin:auto;
    width: 50%;
}
</style>
    <title>网络速度测试-chinlingo</title>
</head>
<body>

    <div class="zzsc-container">
        <div data-to-value='77' data-items-count='32' id="p1_barPie" class="barPie barPie--radio">
          <span class="barPie__value">0</span>
          <div class="startDown" id="startDown" >开始测试</br>start</div>
          <div class="barPie__ring">
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem31" value="100" hidden="hidden">
            <label for="p1_barPieItem31" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem30" value="96.875" hidden="hidden">
            <label for="p1_barPieItem30" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem29" value="93.75" hidden="hidden">
            <label for="p1_barPieItem29" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem28" value="90.625" hidden="hidden">
            <label for="p1_barPieItem28" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem27" value="87.5" hidden="hidden">
            <label for="p1_barPieItem27" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem26" value="84.375" hidden="hidden">
            <label for="p1_barPieItem26" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem25" value="81.25" hidden="hidden">
            <label for="p1_barPieItem25" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem24" value="78.125" hidden="hidden">
            <label for="p1_barPieItem24" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem23" value="75" hidden="hidden">
            <label for="p1_barPieItem23" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem22" value="71.875" hidden="hidden">
            <label for="p1_barPieItem22" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem21" value="68.75" hidden="hidden">
            <label for="p1_barPieItem21" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem20" value="65.625" hidden="hidden">
            <label for="p1_barPieItem20" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem19" value="62.5" hidden="hidden">
            <label for="p1_barPieItem19" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem18" value="59.375" hidden="hidden">
            <label for="p1_barPieItem18" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem17" value="56.25" hidden="hidden">
            <label for="p1_barPieItem17" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem16" value="53.125" hidden="hidden">
            <label for="p1_barPieItem16" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem15" value="50" hidden="hidden">
            <label for="p1_barPieItem15" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem14" value="46.875" hidden="hidden">
            <label for="p1_barPieItem14" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem13" value="43.75" hidden="hidden">
            <label for="p1_barPieItem13" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem12" value="40.625" hidden="hidden">
            <label for="p1_barPieItem12" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem11" value="37.5" hidden="hidden">
            <label for="p1_barPieItem11" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem10" value="34.375" hidden="hidden">
            <label for="p1_barPieItem10" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem9" value="31.25" hidden="hidden">
            <label for="p1_barPieItem9" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem8" value="28.125" hidden="hidden">
            <label for="p1_barPieItem8" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem7" value="25" hidden="hidden">
            <label for="p1_barPieItem7" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem6" value="21.875" hidden="hidden">
            <label for="p1_barPieItem6" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem5" value="18.75" hidden="hidden">
            <label for="p1_barPieItem5" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem4" value="15.625" hidden="hidden">
            <label for="p1_barPieItem4" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem3" value="12.5" hidden="hidden">
            <label for="p1_barPieItem3" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem2" value="9.375" hidden="hidden">
            <label for="p1_barPieItem2" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem1" value="6.25" hidden="hidden">
            <label for="p1_barPieItem1" class="barPie__ring__item"></label>
            <input type="radio" name="barPieRadioGroup" id="p1_barPieItem0" value="3.125" hidden="hidden">
            <label for="p1_barPieItem0" class="barPie__ring__item"></label>
          </div>
        </div>
    </div>
    
    <script src='assets/js/stopExecutionOnTimeout.js?t=1'></script>
    <script src='assets/js/do-in.js?t=1'></script>
 
<!-- built files will be auto injected -->

<script>
    (function (ELEMENT) {
	ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
	ELEMENT.closest = ELEMENT.closest || function closest(selector) {
		var element = this;
		while (element) {
			if (window.CP.shouldStopExecution(1)) {
				break;
			}
			if (element.matches(selector))
				break;
			element = element.parentElement;
		}
		window.CP.exitedLoop(1);
		return element;
	};
}(Element.prototype));

var barPie = {
	onChange: function (e) {
		if (e.target.name != 'barPieRadioGroup')
            {
                return;
            }
        var scopeElm = e.target.closest('.barPie--radio');
         
		barPie.update(scopeElm, +e.target.value);
		if (!scopeElm.active)
			scopeElm.querySelector('.barPie__ring').lastElementChild.addEventListener('click', barPie.clickToNull);
		scopeElm.active = 1;
	},
	clickToNull: function () {
		var that = this;
		if (this.previousElementSibling.checked)
			setTimeout(function () {
				that.previousElementSibling.checked = false;
				that.closest('.barPie--radio').querySelector('.barPie__value').innerHTML = '0';
			}, 0);
	},
	update: function (scopeElm, value, speed, extraStep) {
		if (!scopeElm)
			return;
		var valueElm = scopeElm.querySelector('.barPie__value'), inital = +valueElm.innerHTML, delta = value - inital, doin;
		function step(t, elapsed) {
			console.log(t);
			t = 1 - Math.exp(-t * 7);
			var value = delta * t + inital, remainder = value % 1;
			if (t > 0.99 && (remainder > 0.9 || remainder < 0.01)) {
				value = Math.round(value);
				doin.step = function () {
				};
			} else
				value = value.toFixed(remainder ? 1 : 0);
			valueElm.innerHTML = value;
			if (extraStep)
				extraStep(t);
		}
		if (!valueElm.doin) {
			doin = new Doin(step, speed || 0.33);
			valueElm.doin = doin;
		} else
			doin = valueElm.doin;
		doin.step = step;
		doin.run();
	}
};

document.addEventListener('change', barPie.onChange);
document.querySelectorAll('input').forEach(item=>{
    item.addEventListener('click',(e)=>{
        // e.preventDefault(); 
        e.target.checked=false;
        // e.stopPropagation();
        // return false;
    },{passive:false},false)
});

let down=(function(){
    let defaultOptions={
        process:null,
        end:null,
        start:null,
        error:null,
        url:''
    };
   function cls(options){
    let opts=Object.assign({},defaultOptions,options);
    this.loadData={
        startTime:0,
        endTime:0,
        data:{
            length:0,
            process:[]
        }
    }
    this.options=opts;
    
  }
  let log=console.log;
  cls.prototype.invoke=function(methodname,...params){
    this.options[methodname]?this.options[methodname].call(this,...params):'';
  }
  cls.prototype.start=function(url){
    var xhr=new XMLHttpRequest(),that=this,url=url?url:this.options.url;
        xhr.open('get',url);
        xhr.onprogress=function(event){
            that.loadData.data.process.push([event.timeStamp-that.loadData.startTime,event.loaded]);
            that.invoke('process',event.timeStamp-that.loadData.startTime,event.loaded);
            // log(`速率：${calcspeed(event.timeStamp-that.loadData.startTime,event.loaded)}/kb`);
        }
        xhr.onreadystatechange=function(event){ 
            if(xhr.readyState==xhr.LOADING){
            }else if(xhr.readyState==xhr.HEADERS_RECEIVED){
                that.loadData.startTime=event.timeStamp;
                that.loadData.endTime=0;
                that.loadData.data.length=xhr.getResponseHeader('Content-Length');
                that.invoke('start',that.loadData.data.length);
                // msg(`开始接收数据！总共:${loadData.data.length}`);
            }else if(xhr.readyState==xhr.DONE){
                that.loadData.endTime=event.timeStamp;
                that.invoke('end',that.loadData.endTime-that.loadData.startTime,event.loaded);
                // msg(`数据接收完成!用时：${second(that.loadData.endTime-loadData.startTime).toFixed(2)},速率：${calcspeed(loadData.endTime-loadData.startTime,loadData.data.length)}/kb`);
            }
        }
        xhr.ontimeout=function(err){
            log('与服务器连接失败！');
            that.invoke('error',err);

        }
        xhr.onerror=function(err){
            log('发生了错误！',err.message);
            that.invoke('error',err);
        }
        xhr.send();
  }
  cls.prototype.calcspeed= function calcspeed(time,len){
     return (humanLengh(len)/second(time)).toFixed(2);
    }
    cls.prototype.second=  function second(time){
        return time/1000;
    }
    cls.prototype.humanLengh= function humanLengh(len,unit){
        switch(unit){
            case 'm':
                return len/1024/1024;
                break;
            default :
                return len/1024;
        }
    } 
  return cls;

})();  
let downInstance=new down({
    process:function(time,len){

    }
});
// downInstance.start('/2');
</script>
</body>
</html>
